<!--
 * @Author: your name
 * @Date: 2022-01-18 11:51:16
 * @LastEditTime: 2022-01-18 15:23:45
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\VueStudy\vue-test4\vue-eqidemic\src\components\Area\Area.vue
-->
<template>
  <div class="area">
    <div class="bg">
        <a href="">
          <img class="fanhui" src="../../assets/images/fanhui.png" alt="" srcset="">
      </a>
      <div class="content">
        <div class="th">全国风险地区汇总</div>
          <!-- 高风险区域 -->
          <template v-if="high.length > 0">
              <div class="title"><img src="../../assets/images/high.png" alt="">
                  高风险区域有{{high.length}}个</div>
              <ul class="list">
                  <li v-for="(item,index) in high" :key="index">{{item}}</li>
              </ul>
          </template>
          <!-- 中风险区域 -->
          <template v-if="mid.length > 0">
             <div class="title"><img src="../../assets/images/mid.png" alt="">
                 中风险区域{{mid.length}}个</div>
             <ul class="list">
                  <li v-for="(item,index) in mid" :key="index">{{item}}</li>
              </ul>
          </template>
        </div>
      </div>
  </div>
</template>

<script>
import api from '../../api/index'
export default {
    name:'Area',
    data() {
        return {
            high:[],
            mid:[]
        }
    },
    created() {
        api.getCovInfo().then((res) => {
            // console.log(res.data);
            const dataList = res.data.newslist[0].riskarea
            //风险地区
            this.high = dataList.high
            this.mid = dataList.mid

        })
    },
}
</script>

<style>
.area {
  background: #f5f5f5;
}
.bg {
  height: 3.6rem;
  background: url("../../assets/images/area.png") no-repeat;
  background-size: cover;
  padding-top: 2.6rem;
  /* position: relative; */
}
.content {
  background: #fff;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  padding: 0.2rem;
  border-radius: 0.2rem;
  min-height: 4rem;
  margin-bottom: 0.2rem;
  }
  .th {
    margin-bottom: 0.3rem;
    font-size: 0.34rem;
  }
  .th:before {
    display: inline-block;
    width: 0.1rem;
    height: 0.3rem;
    margin-right: 0.1rem;
    background-color: #4169e2;
    content: "";
    vertical-align: middle;
  }
  .title{
      font-size: 0.3rem;
      margin-bottom: 0.3rem;
      }
      img{
          width: 0.4rem;
          vertical-align: top;
      }
  
  
  .list    li{
          margin-bottom: 0.2rem;
          color: #333;
          background:#f7f7f7;
          padding:0.1rem;
          border-radius: 0.1rem;
          letter-spacing: 0.01rem;
          line-height: 0.5rem;
      }
.fanhui{
    position: absolute;
    z-index: 1;
    /* display: flex; */
    width: 40px;
    height: 40px;
    margin-top:-2.5rem;
    margin-left:0.1rem;
    opacity: 0.8;
}  



</style>
